<script>
import render from "@/utils/generator/render";

const layouts = {
  colFormItem(h, element, index, parent) {
    const { activeItem, showHistory, showDesc, saveValue } = this.$listeners;
    let options = element.options;
    if(options){
    for (let option of options) {
      if (option.label == "其他" || option.label == "其它") {
        element.show_other = true;
      }
    }}

    return (
      <el-col
        span={element.span}
        nativeOnClick={(event) => {
          activeItem(element);
          event.stopPropagation();
        }}
      >
        {element.show_history_btn && (
          <el-button
            type="success"
            icon="el-icon-check"
            size="mini"
            circle
            style="position: relative;right: 35px;top: 33px;z-index: 1;margin-right:10px"
            nativeOnClick={(event) => {
              showHistory(element);
              event.stopPropagation();
            }}
          ></el-button>
        )}
        <el-form-item
          label={"(" + (index + 1) + ") " + element.label}
          required={element.required}
        >
          <el-button
            icon="el-icon-edit"
            circle
            nativeOnClick={(event) => {
              showDesc(element);
              event.stopPropagation();
            }}
            style="border:none"
          ></el-button>
          <br />
          {element.tag != "el-upload" && (
            <render
              key={element.renderKey}
              conf={element}
              onInput={(event) => {
                this.$set(element, "defaultValue", event);
                saveValue(element);
              }}
            />
          )}
          {element.tag == "el-upload" &&
            ((
              <file-upload
                v-model={element.defaultValue}
                onInput={(event) => {
                  this.$set(element, "defaultValue", event);
                  saveValue(element);
                }}
              />
            )
          )}
          {element.show_other && (
            <el-input
              style="width:160px;float:left;"
              placeholder="请输入其他情况"
              v-model={element.other}
              onBlur={(event) => {
                saveValue(element);
                event.stopPropagation();
              }}
            ></el-input>
          )}
          {element.show_desc && (
            <el-input
              type="textarea"
              style="display:block;clear:both;max-width:600px;"
              placeholder="请输入您对该问题的说明或看法"
              v-model={element.questionDesc}
              onBlur={(event) => {
                saveValue(element);
                event.stopPropagation();
              }}
            ></el-input>
          )}
          {element.show_history && (
            <el-card style="margin-top: 20px">
              <el-timeline>
                {element.activities.map((activity) => {
                  return (
                    <el-timeline-item timestamp={activity.timestamp}>
                      {activity.content}
                    </el-timeline-item>
                  );
                })}
              </el-timeline>
            </el-card>
          )}
        </el-form-item>
      </el-col>
    );
  },
  rowFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    let child = renderChildren.apply(this, arguments);
    if (element.type === "flex") {
      child = (
        <el-row
          type={element.type}
          justify={element.justify}
          align={element.align}
        >
          {child}
        </el-row>
      );
    }
    return (
      <el-col span={element.span}>
        <el-row
          gutter={element.gutter}
          class={className}
          nativeOnClick={(event) => {
            activeItem(element);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{element.componentName}</span>
          <draggable
            list={element.children}
            animation={340}
            group="componentsGroup"
            class="drag-wrapper"
          >
            {child}
          </draggable>
        </el-row>
      </el-col>
    );
  },
};

function renderChildren(h, element, index, parent) {
  if (!Array.isArray(element.children)) return null;
  return element.children.map((el, i) => {
    const layout = layouts[el.layout];
    if (layout) {
      return layout.call(this, h, el, i, element.children);
    }
    return layoutIsNotFound();
  });
}

function layoutIsNotFound() {
  throw new Error(`没有与${this.element.layout}匹配的layout`);
}

function handleBlur(element) {
  console.log(element.defaultValue);
  element.show_history_btn = true;
}

function showOther(element) {
  console.log(element.defaultValue);
  element.show_history_btn = true;
}

export default {
  components: {
    render,
  },
  props: ["element", "index", "drawingList", "activeId"],

  render(h) {
    const layout = layouts[this.element.layout];

    if (layout) {
      return layout.call(this, h, this.element, this.index, this.drawingList);
    }
    return layoutIsNotFound();
  },
};
</script>
<style lang="scss"></style>
